<template>
  <div class="simba-content-edit-menu">
    <h1>左侧菜单</h1>
    <div
      style="
        user-select: none;
        cursor: pointer;
        padding: 10px;
        line-height: 80px;
        text-align: center;
      "
      v-for="item in compnentsOptions"
      :key="item.key"
    >
      <div
        :draggable="true"
        @dragstart="dragStartHandle($event, item)"
        @dragend="dragendHandle($event, item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  dragStartHandle,
  dragHandle,
  dragendHandle,
} from "@/views/ContentEdit/hooks/useDrag.hook";
const compnentsOptions = [
  {
    key: "Chart",
    name: "图表1",
    attr: {
      background: "#fff",
      x: 0,
      y: 0,
      w: 500,
      h: 300,
    },
  },
  {
    key: "Chart",
    name: "图表2",
    attr: {
      background: "#ccc",
      x: 0,
      y: 0,
      w: 100,
      h: 100,
    },
  },
  {
    key: "Chart",
    name: "图表3",
    attr: {
      background: "#FF5F1D",
      x: 0,
      y: 0,
      w: 100,
      h: 100,
    },
  },
];
</script>
<style lang="scss" scoped>
@include simba("content-edit-menu") {
  width: 330px;
  height: calc(100vh - 64px);
  background-color: #202021;
}
</style>